<template>
    <div class="pdf-container pdf-viewer">
        <div class="pdf-bar">
            <div class="prev" @click="prePage" v-if="show">
              上一页
            </div>
            <div class="page"  v-if="show">
              <el-input-number
                disabled
                v-model.number="page"
                :min="0"
                :max="pageCount"
                size="mini"
              />
            </div>
            <div class="page-count"  v-if="show">/ {{ pageCount }}</div>
            <div class="next" @click="nextPage"  v-if="show">
              下一页
            </div>
          </div>
          <div id="pdf-content"></div>
      <!-- <iframe v-if="docType!='pdf'" :src="pdfUrl" marginWidth="0" marginHeight="0" scrolling="no" frameBorder="0" style="width: calc(100% + 17px); height: calc(100% + 17px)"></iframe> -->
    </div>
  </template>
  <script>
  import Pdfh5 from 'pdfh5'
  import 'pdfh5/css/pdfh5.css'
  export default {
    name: 'Pdfh5',
    data () {
      return {
        show:false,
        page:1,
        pageCount:0,
        docType: '',
        pdfh5: null,
        // 可引入网络文件或者本地文件
        pdfUrl: '' // 如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹）
      }
    },
    mounted () {
    },
    methods: {
      prePage() {
        let count = this.page - 1
        if (count < 1) return
         this.jumpToPage(count)
      },
      nextPage() {
        console.log('this.pageCount', this.page, this.pageCount)
        const targetPage = this.page + 1
        if (targetPage <= this.pageCount) {
          this.jumpToPage(targetPage)
        }
      },
      jumpToPage(pageNumber) {
        this.page = pageNumber
        this.pdfh5.goto(pageNumber)
      },
      initPdf (pdfSrc) {
        let that = this;
        this.pdfurl = pdfSrc
        // pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
        // pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印
        this.pdfh5 = new Pdfh5('#pdf-content', {
          pdfurl: this.pdfurl,
          goto: 1
          // 设置每一页pdf上的水印
          // logo: { src: require('@/assets/images/bus/icon_head@2x.png'), x: 420, y: 700, width: 120, height: 120 }
        })
        this.pdfh5.scrollEnable(false) // 允许pdf滚动
        // 监听pdf准备开始渲染，此时可以拿到pdf总页数
        this.pdfh5.on('ready', function () {
          console.log('总页数:' + this.totalNum)
          that.pageCount = this.totalNum;
        })
        this.pdfh5.on('scroll', function () {
          console.log('当前页数:' + this.currentNum)
        })
        // 监听pdf加载完成事件，加载失败、渲染成功都会触发
        this.pdfh5.on('complete', (status, msg, time) => {
          console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒')
          that.show = true
        })
      }
    }
  }
  </script>
  <style  scoped lang="scss">
  .pdfjs {
    height: 100%;
  }
  .pdf-container {
    width: 100%;
    height: 100%;
  }
  .pdf-viewer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .pdf-bar {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;

      width: 100%;
      height: 50px;
      border: 1px solid #ddd;
      box-sizing: border-box;
      text-align: center;
      background: #f8f8f8;

      display: flex;
      justify-content: center;
      align-items: center;
      & > div {
        min-width: 36px;
        height: 36px;
        line-height: 36px;
        color: #666;
        cursor: pointer;
        i {
          width: 100%;
          height: 100%;
          color: #666;
          font-weight: bold;
        }
        ::v-deep .el-input--mini {
          input {
            padding: 0 8px;
            width: 50px;
            text-align: center;
          }
          .el-input-group__append {
            padding: 0 6px;
            color: #666;
            cursor: auto;
          }
        }
        ::v-deep .el-input-number {
          margin-left: 10px;
          width: 40px;
          .el-input-number__decrease {
            display: none;
          }
          .el-input-number__increase {
            display: none;
          }
          .el-input--mini {
            input {
              width: 40px;
              text-align: center;
            }
          }
        }
      }
      .prev {
        margin-left: 16px;
      }
      .scale,
      .page {
        display: flex;
        align-items: center;
      }
      .page-count {
        margin-right: 10px;
      }
    }
    .pdf-wrapper {
      position: absolute;
      margin-top: 50px;
      width: 100%;
      height: calc(100% - 50px);
      overflow: auto;
    }
  }

  </style>